import Responsive from '@c/responsive'
import styles from './index.module.scss'
import cm from 'classnames'
import { downloadReport } from '@/utils/report'
import { goBack } from '@/utils/utils'
import { DOWNLOAD_URL } from '@/constant'

const Index = () => {
  return (
    <Responsive top={100}>
      <div className={cm(styles.back, styles.backPhone)} onClick={() => goBack()}>
        <img loading="lazy" alt="返回" src="/images/back.png" />
        <span>返回</span>
      </div>
      <div className={cm(styles.usb, styles.usbPhone)}>
        <div className={styles.title}>U盘安装指南</div>
        <p className={styles['usb-step']}>step1：点击下载按钮下载apk安装包，并拷贝U盘</p>
        <a
          rel="nofollow"
          download
          href={DOWNLOAD_URL.tv}
          className={styles['usb-download']}
          onClick={() => downloadReport('guide_usb_tv_download')}
        >
          下载安装包
        </a>
        <p className={styles['usb-step']} style={{ marginBottom: 16 }}>
          step2：将U盘插入智能电视或机顶盒，通过电视盒子文件管理软件打开进行安装，或通过第三方文件管理软
          件（如ES文件浏览器或File Commander）打开安装（图1）。
        </p>
        <img
          loading="lazy"
          src="/images/step1.webp"
          alt="步骤"
          className={cm(styles['step-img-phone'], 'hideWhenPc')}
        />
        <p className={styles['usb-step']} style={{ marginBottom: 30 }}>
          step3：点击安装，同意授权。正常安装结束后，在电视桌面找到“星视界”，立即畅享（图2）
        </p>
        <img
          loading="lazy"
          src="/images/step2.webp"
          alt="步骤"
          className={cm(styles['step-img-phone'], 'hideWhenPc')}
        />
        <div className={cm(styles['usb-picture'], 'hideWhenPhone')}>
          <div className={styles['usb-picture-item']}>
            <div className={cm(styles['usb-step-box'], styles['usb-step-phone'])}>1</div>
          </div>
          <div className={styles['usb-picture-item']}>
            <div className={cm(styles['usb-step-box'], styles['usb-step-phone'])}>2</div>
          </div>
        </div>
        <p className={styles['usb-step']} style={{ marginBottom: 24 }}>
          如果在安装过程中遇到任何问题，可以点击下方按钮加入Telegram群提问，专人解答。
        </p>
        <a
          className={cm(styles.joinChat, styles.joinChatPhone)}
          rel="nofollow"
          href="https://t.me/+OPQzYYKfMK04ODU1"
          target="_blank"
        >
          加入Telegram群聊
        </a>
      </div>
    </Responsive>
  )
}

export default Index

export async function getServerSideProps() {
  return {
    props: {
      layoutProps: {
        noSomeMetaInfo: false,
        url: '/download',
        title: '电视/盒子U盘安装指南 - 星视界',
        desc: '星视界提供最全的中文电视直播及海量影视资源，现已适配手机及电视设备，马上下载开启完整影视&直播体验吧。'
      }
    }
  }
}
